<template>
  <div class="attachment-selector">
    <template v-if="modelValue">
      <div class="file-show">
        <div class="file-name" :title="modelValue.name">
          {{ modelValue.name }}
        </div>
        <div class="iconfont icon-del" @click="deFile"></div>
      </div>
    </template>
    <el-upload
      v-else
      name="file"
      :show-file-list="false"
      :multiple="false"
      :http-request="selectorFile"
      accept=".zip,.rar,.7z,.tar,.gz,.bz2,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.txt"
    >
      <el-button type="primary">选择文件</el-button>
    </el-upload>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";

const props = defineProps({
  modelValue: {
    type: Object,
    default: null,
  },
});
const emit = defineEmits(["update:modelValue"]);
const selectorFile = async (file) => {
  emit("update:modelValue", file.file);
};
const deFile = () => {
  emit("update:modelValue", null);
};
onMounted(() => {});
</script>

<style lang="scss" scoped>
.attachment-selector {
  width: 100%;
  .file-show {
    display: flex;
    justify-content: space-around;
    .file-name {
      width: 100%;
      flex: 1;
      font-size: 15px;
      overflow: hidden;
      //超出部分打点点
      text-overflow: ellipsis;
      color: var(--link);
    }
    .icon-del {
      font-size: 20px;
      color: var(--link);
      cursor: pointer;
    }
  }
}
</style>
